<template>
  <view class="index">
    <!-- navbar -->
    <navbar v-if="isShowNavbar" :title="tabs[currentIndex].text" />

    <!-- tab page -->
    <view class="main">
      <block v-if="currentIndex === 0"><Home /></block>
      <block v-else-if="currentIndex === 1"><Theater /></block>
      <block v-else-if="currentIndex === 2"><Mine /></block>
    </view>

    <!-- tabbar -->
    <tabbar v-if="isShowTabbar" :tabs="tabs" :current-tab="currentIndex" @tab-item-click="tabItemClick" />
  </view>
</template>

<script setup>
  import Home from '../tabs/home/home.vue';
  import Theater from '../tabs/theater/theater.vue';
  import Mine from '../tabs/mine/mine.vue';
  import { ref, computed } from 'vue';

  const tabs = ref([
    {
      text: '首页',
      pagePath: 'pages/tabs/home/home'
    },
    {
      text: '剧场',
      pagePath: 'pages/tabs/theater/theater'
    },
    {
      text: '我的',
      pagePath: 'pages/tabs/mine/mine'
    }
  ]);
  const currentIndex = ref(0);

  const tabItemClick = ({ tab, index }) => {
    currentIndex.value = index;
  };

  // - navbar
  const isShowNavbar = computed(() => {
    const blackPagesIndex = [0, 1, 2];

    return !blackPagesIndex.includes(currentIndex.value);
  });
  // - tabbar
  const isShowTabbar = computed(() => {
    const whitePagesIndex = [0, 1, 2];

    return whitePagesIndex.includes(currentIndex.value);
  });
</script>

<style lang="scss">
  .index {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    overflow-y: auto;

    .main {
      position: relative;
      flex: 1;
    }
  }
</style>
